<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/element-theme-chalk@2.15.6/lib/index.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.7/lib/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios"></script>
    <style type="text/css">
        #main {
            margin: 0 auto;
            width: 960px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="main">
            <el-table :data="players">
                <el-table-column prop="pid" label="玩家"></el-table-column>
                <el-table-column prop="ranking" label="名次"></el-table-column>
                <el-table-column prop="level" label="等级"></el-table-column>
                <el-table-column prop="value" label="战力值"></el-table-column>
                <el-table-column label="更新时间">
                    <template slot-scope="scope">
                        {{ formatDate(scope.row.updateTime) }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: function () {
            return {
                players: [],
                currentPage: 1,
                pageSize: 20,
                total: 0
            }
        },
        mounted() {
            this.query();
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.query()
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.query()
            },
            formatDate(timestamp) {
                const date = new Date(timestamp*1000);
                const options = {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                };

                return date.toLocaleString('zh-CN', options).replace(/\//g, '-').replace(',', '');
            },
            query() {
                axios.get(`/svr/v1/admin/rank/list?page=${this.currentPage}&page-size=${this.pageSize}`) // 默认同源
                    .then(({ status, data: { code, message, data } }) => {
                        if (status >= 300) {
                            this.$message(`bad request ${status}`)
                            return
                        }

                        if (code > 0) {
                            this.$message(`bad request ${message}`)
                            return
                        }

                        this.players = data.list
                        this.total = data.total
                    })
                    .catch((error) => {
                        if (error.response) {
                            console.log(error.response.status); // 请求发送了，但状态码超出了 2xx
                        } else if (error.request) {
                            console.log(error.request); // 请求发送了，但没有收到响应
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', error.message);
                        }
                        console.log(error.config);
                    });
            }
        }
    })
</script>

</html>